<div class="i-sdc-designer-sidebar-capabilities-requirements">
        <div class="i-sdc-designer-sidebar-section-content-item-relations-group">
            <div class="i-sdc-designer-sidebar-section-content-item-relations"
                 *ngFor="let requirement of requirements">
                <div class="i-sdc-designer-sidebar-section-content-item-relations-details">
                    <div class="i-sdc-designer-sidebar-section-content-item-relations-details-name">{{requirement.name}}&nbsp;</div>
                    <div class="i-sdc-designer-sidebar-section-content-item-relations-details-desc">{{requirement.node}}
                        <div *ngIf="getRelation(requirement) != null">
                            <div class="i-sdc-designer-sidebar-section-content-item-relations-details-indent-box"></div>
                            <div class="i-sdc-designer-sidebar-section-content-item-relations-details-child">
                                <span class="i-sdc-designer-sidebar-section-content-item-relations-details-desc">{{getRelation(requirement).type}} <br/></span>
                                <span class="i-sdc-designer-sidebar-section-content-item-relations-details-name">{{getRelation(requirement).requirementName}}</span>
                            </div>
                        </div>
                    </div>
                    <div class="checkbox-label-mark-as-external"
                         *ngIf="isInstanceSelected">
                        <checkbox
                                class="checkbox-label"
                                [attr.data-tests-id]="'checkbox-external-req-' + requirement.name"
                                [label]="'External'"
                                (checkedChange)="onMarkAsExternal(requirement)"
                                [(checked)]="requirement.external"
                                [disabled]="isViewOnly">
                        </checkbox>
                    </div>
                </div>
            </div>
        </div>
    </div>
    